{% extends "templates/base.html" %}
{% set game_name = "Stanice - Hnojení a živiny" %}
{% block content %}

<div id="appContainer" class="full-screen-app bg-light">
    <button id="fsBtn" class="btn btn-outline-secondary position-absolute top-0 end-0 m-3 shadow" style="z-index: 10050;" onclick="toggleFullscreen()">
        <i class="fa-solid fa-expand fa-2x"></i>
    </button>

    <!-- Zadání PINu dýně -->
    <div id="pinScreen" class="container d-flex flex-column justify-content-center align-items-center h-100">
        <h1 class="mb-4 text-center fw-bold" style="color: #2e7d32;">
            <i class="fa-solid fa-seedling"></i> Stanice: Hnojení a živiny
        </h1>
        <h4 class="mb-4 text-center text-secondary">Zadej tajný kód své dýně:</h4>
        
        <div class="d-flex justify-content-center gap-3 mb-4" id="pinDisplay">
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
            <div class="pin-slot border rounded-circle shadow-sm bg-white" style="width: 80px; height: 80px;"></div>
        </div>

        <div class="d-flex flex-wrap justify-content-center gap-3 mb-4" style="max-width: 400px;">
            <button class="btn color-btn" style="background-color: red;" onclick="addPinColor('red')"></button>
            <button class="btn color-btn" style="background-color: blue;" onclick="addPinColor('blue')"></button>
            <button class="btn color-btn" style="background-color: green;" onclick="addPinColor('green')"></button>
            <button class="btn color-btn" style="background-color: yellow;" onclick="addPinColor('yellow')"></button>
            <button class="btn color-btn" style="background-color: purple;" onclick="addPinColor('purple')"></button>
            <button class="btn color-btn" style="background-color: orange;" onclick="addPinColor('orange')"></button>
        </div>

        <button class="btn btn-outline-danger btn-lg mt-2 px-4 shadow-sm" onclick="clearPin()">
            <i class="fa-solid fa-rotate-left"></i> Vymazat kód
        </button>
    </div>

    <!-- Akce hnojení -->
    <div id="fertScreen" class="container py-4 flex-column h-100 d-none justify-content-center align-items-center" style="position: relative;">
        <h1 class="mb-3 fw-bold" style="color: #2e7d32;"><i class="fa-solid fa-leaf"></i> Přidávání živin</h1>
        <h4 class="mb-4 text-secondary text-center px-3">Ťukej na tlačítko a dodávej dýni výživný kompost! (+5 %)</h4>

        <div class="progress shadow-lg mb-5 w-100" style="height: 60px; max-width: 500px; border: 4px solid #2e7d32; border-radius: 20px; background-color: #fff;">
            <div id="fertProgressBar" class="progress-bar progress-bar-striped progress-bar-animated fs-3 fw-bold text-white" role="progressbar" style="width: 0%; background-color: #2e7d32;">0 %</div>
        </div>

        <button id="fertBtn" class="btn shadow-lg rounded-circle d-flex align-items-center justify-content-center action-btn" style="width: 250px; height: 250px; background-color: #2e7d32; color: white; user-select: none;" onclick="addFert()">
            <div class="text-center">
                <i id="fertIcon" class="fa-solid fa-seedling fert-idle" style="font-size: 5rem;"></i>
                <h3 id="btnText" class="mt-3 fw-bold">PŘIHOJIT</h3>
            </div>
        </button>

        <div class="d-flex gap-3 mt-5">
            <button class="btn btn-success btn-lg px-4 py-3 shadow fw-bold fs-5" onclick="finalizeFert()">
                <i class="fa-solid fa-check"></i> HOTOVO (Uložit)
            </button>
            <button class="btn btn-outline-secondary btn-lg px-4 py-3 shadow fw-bold fs-5" onclick="cancelFert()">
                <i class="fa-solid fa-xmark"></i> Zrušit
            </button>
        </div>
    </div>

    <!-- Výsledek -->
    <div id="resultScreen" class="container py-4 flex-column h-100 d-none justify-content-center align-items-center text-center">
        <i id="resultIcon" class="fa-solid fa-circle-check text-success" style="font-size: 8rem;"></i>
        <h1 id="resultTitle" class="mt-4 display-4 fw-bold">Hotovo!</h1>
        <h3 id="resultMessage" class="mt-3 text-secondary">Půda má dostatek živin pro růst.</h3>
        <div class="spinner-border text-secondary mt-5" role="status"></div>
        <p class="mt-2 text-muted">Připravuji stanici pro dalšího pěstitele...</p>
    </div>
</div>

<style>
    .full-screen-app { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; display: flex; flex-direction: column; overflow: hidden; }
    body { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
    
    .color-btn { width: 90px; height: 90px; border-radius: 25px; border: 4px solid rgba(0,0,0,0.1); transition: transform 0.1s; }
    .color-btn:active { transform: scale(0.9); }
    
    .bg-danger-flash { background-color: #dc3545 !important; transition: background-color 0.2s; }

    .action-btn { transition: transform 0.1s ease, background-color 0.1s ease; border: none; }
    .action-btn:active { transform: scale(0.95); }
    .action-btn.active-fert { background-color: #1b5e20 !important; }

    .fert-idle { transform: rotate(0deg) scale(1); transition: transform 0.1s ease; }
    .fert-tilt { transform: rotate(-25deg) scale(1.2); transition: transform 0.1s ease; }
</style>

<script>
    forrestHubLib = ForrestHubLib.getInstance(false); 
    const varPrefix = "flower_"; 
    
    let currentPin = [];
    let targetFlowerId = "";
    let targetFlowerData = null;
    let localFertLevel = 0;
    let inactivityTimer = null;

    function toggleFullscreen() {
        const el = document.documentElement;
        if (!document.fullscreenElement) {
            if (el.requestFullscreen) el.requestFullscreen();
            else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen();
        }
    }

    function addPinColor(color) {
        if (currentPin.length < 3) {
            currentPin.push(color);
            updatePinDisplay();
            if (currentPin.length === 3) checkPinInDatabase();
        }
    }

    function clearPin() {
        currentPin = [];
        updatePinDisplay();
    }

    function updatePinDisplay() {
        const slots = document.querySelectorAll('.pin-slot');
        slots.forEach((slot, index) => {
            if (currentPin[index]) {
                slot.style.backgroundColor = currentPin[index];
                slot.classList.remove('bg-white');
            } else {
                slot.style.backgroundColor = '';
                slot.classList.add('bg-white');
            }
        });
    }

    async function checkPinInDatabase() {
        targetFlowerId = varPrefix + currentPin.join('_');
        try {
            let exists = await forrestHubLib.dbVarKeyExists(targetFlowerId);
            if (exists) {
                targetFlowerData = await forrestHubLib.dbVarGetKey(targetFlowerId);
                
                if (targetFlowerData.status === "sick") {
                    forrestHubLib.uiShowAlert('warning', 'Tvoje dýně chřadne a je nemocná! Běž k Rostlinnému lékaři.', 4000);
                    setTimeout(clearPin, 2000);
                    return;
                }
                
                targetFlowerData.status = "busy";
                await forrestHubLib.dbVarSetKey(targetFlowerId, targetFlowerData);
                prepareFertScreen();
            } else {
                forrestHubLib.uiShowAlert('danger', 'Tento kód dýně neexistuje. Zkus to znovu.', 3000);
                setTimeout(clearPin, 1000); 
            }
        } catch (error) {
            forrestHubLib.uiShowAlert('danger', 'Chyba serveru při ověřování PINu.', 3000);
            clearPin();
        }
    }

    function resetInactivityTimer() {
        clearTimeout(inactivityTimer);
        inactivityTimer = setTimeout(cancelFert, 30000);
    }

    function prepareFertScreen() {
        localFertLevel = targetFlowerData.fertilizer;
        updateProgressBar();
        document.getElementById('pinScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('fertScreen').classList.replace('d-none', 'd-flex');
        
        document.getElementById('fertIcon').className = "fa-solid fa-seedling fert-idle";
        resetInactivityTimer();
    }

    function updateProgressBar() {
        const bar = document.getElementById('fertProgressBar');
        bar.style.width = `${Math.min(100, localFertLevel)}%`;
        bar.innerText = `${localFertLevel} %`;
        
        if (localFertLevel > 100) {
            bar.style.backgroundColor = "#dc3545"; 
        } else {
            bar.style.backgroundColor = "#2e7d32"; 
        }
    }

    function addFert() {
        resetInactivityTimer();
        localFertLevel += 5;
        updateProgressBar();

        const btn = document.getElementById('fertBtn');
        const icon = document.getElementById('fertIcon');

        btn.classList.add('active-fert'); 
        icon.classList.replace('fert-idle', 'fert-tilt');

        setTimeout(() => {
            btn.classList.remove('active-fert');
            icon.classList.replace('fert-tilt', 'fert-idle');
        }, 150);

        if (localFertLevel >= 110) finalizeFert();
    }

    async function finalizeFert() {
        clearTimeout(inactivityTimer);
        targetFlowerData.fertilizer = localFertLevel;
        let isOverferted = false;

        if (localFertLevel > 100) {
            targetFlowerData.status = "sick";
            isOverferted = true;
        } else {
            targetFlowerData.status = "ok";
        }

        try {
            await forrestHubLib.dbVarSetKey(targetFlowerId, targetFlowerData);
            showResultScreen(isOverferted);
        } catch (error) {
            forrestHubLib.uiShowAlert('danger', 'Chyba při ukládání hnojení.', 3000);
            cancelFert(); 
        }
    }

    async function cancelFert() {
        clearTimeout(inactivityTimer);
        if (targetFlowerData) {
            targetFlowerData.status = "ok"; 
            await forrestHubLib.dbVarSetKey(targetFlowerId, targetFlowerData);
        }
        resetStation();
    }

    function showResultScreen(isOverferted) {
        document.getElementById('fertScreen').classList.replace('d-flex', 'd-none');
        const resScreen = document.getElementById('resultScreen');
        const icon = document.getElementById('resultIcon');
        const title = document.getElementById('resultTitle');
        const msg = document.getElementById('resultMessage');

        resScreen.classList.replace('d-none', 'd-flex');

        if (isOverferted) {
            icon.className = "fa-solid fa-skull-crossbones text-danger";
            title.innerText = "Přehnojeno!";
            title.className = "mt-4 display-4 fw-bold text-danger";
            msg.innerText = "Půda je přesycená a výhonky se pálí! Rychle utíkej k Rostlinnému lékaři.";
            appContainer.classList.add('bg-danger-flash');
        } else {
            icon.className = "fa-solid fa-circle-check text-success";
            title.innerText = "Pohnojeno!";
            title.className = "mt-4 display-4 fw-bold text-success";
            msg.innerText = `Půda má v sobě ${localFertLevel} % živin.`;
        }

        setTimeout(() => {
            appContainer.classList.remove('bg-danger-flash');
            resetStation();
        }, 4000);
    }

    function resetStation() {
        clearPin();
        targetFlowerId = ""; targetFlowerData = null; localFertLevel = 0;
        document.getElementById('resultScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('fertScreen').classList.replace('d-flex', 'd-none');
        document.getElementById('pinScreen').classList.replace('d-none', 'd-flex');
    }
</script>
{% endblock %}